<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
	</head>
	<body>
		<div id="app">
			<!-- 3.调用组件 -->
			<!-- 注意事项:
				1.如果组件名称使用了驼峰规则,则默认的条件下vue渲染数据时都采用小写字母
				hellocomponent.所以导致组件不能匹配.
				2.如果需要使用驼峰规则,则使用 '-'线连接 
				强调: 组件的调用时才能添加'-'
			 -->
			<hello-component></hello-component>
			<hello-component></hello-component>
			<hello-component></hello-component>
			<hello-component></hello-component>
		</div>
		
		<!-- 
			模板标签的用法
			1.模板标签不要与vue div 耦合
			2.template标签需要添加id 进行标识
			3.template模板标签中 必须有根标签div
		 -->
		 <template id="helloTem">
			 <div>
				 <h1>{{msg}}</h1>
			 </div>
		 </template>
		 
		
		<script src="../js/vue.js"></script>
		<script>
			//1.定义全局组件  参数1: 定义组件名称 暂时不要使用驼峰规则
			//				 参数2: 定义组件对象
			Vue.component('helloComponent',{
				//1.组件数据.
				data(){
					return {
						msg: 'hello 组件'
					}
				},
				//2.组件结构 html数据
					// ''当前行有效
					// ``支持多种格式的html
				//template: `<h1>{{msg}}</h1>`
				//3.组件模板优化
				template: '#helloTem'
			})
			
			/* 注意事项: 组件的使用必须有Vue对象的渲染 */
			const app1 = new Vue({
				el: "#app"
			})
		</script>
	</body>
</html>
